//1.tasks 数据结构
// let tasks = [
//     { id: 1, text: "睡觉", completed: false },
//     { id: 2, text: "吃饭", completed: true },
//     { id: 3, text: "打豆豆", completed: false }
//   ];
  let tasks=getLocalStoyage()||[];
  console.log(tasks);
  
  //2.获取元素
  let addBtn = document.querySelector(".addtask .addbtn");
  let inputText = document.querySelector(".addtask input");
  let ul = document.querySelector(".tasklist ul");
  let category =document.querySelector(".category");
  let inputSearch=document.querySelector(".search input")
  
  
  
  //3. 事件添加
  
  // window onload 事件
  window.addEventListener('load',function () {
    // 渲染
    renderTasks(tasks);
    //添加事件
  })
  // 添加按钮
  addBtn.addEventListener('click', function () {
    if(inputText.value.trim()!==""){

    
    //数据添加
    //1.产生数据-task对象
    //数组最有一个值+1
      let id;
      if(tasks.length){
        id = tasks[tasks.length-1].id+1;
      }else{
        id=1
      }

     
    const task = {
      id: id, text: inputText.value, completed: false
    };
    //2.把对象放到tasks数组中
    tasks.push(task);
    saveToLocalStoyage()
    //3.显示下
    // console.log(tasks);
    //4.渲染
    renderTasks(tasks);
        }else{
            window.alert('请输入添加任务信息！')

        }
    
  });
  // category添加事件-filter 判断是哪个按钮--事件委托
  category.addEventListener('click',function (e) {
    if (e.target.tagName=="BUTTON") {
      // 获取自定义属性中的值
      const filter = e.target.dataset.filter;
      //渲染
      renderTasks(filterTasks(tasks,filter))
    }
  })

  //搜索框提交enter后触发修改数据
  inputSearch.addEventListener('keydown',function(e){
    if(e.key==="Enter"){
        if(inputSearch.value.trim()!=""){
            //拿搜索框中的值和数组中每个元素的text值进行搜索 得到一个数组
            let searchTasks = tasks.filter(task=>task.text.includes(inputSearch.value.trim()))
                
            //渲染
            renderTasks(searchTasks)

        }else{
            window.alert('请在搜索框中输入信息！')
        }

    }
  })
//使用事件委托处理删除操作
  ul.addEventListener('click',function(e){
   removeTask(e)
   changeStatus(e)
   editTask(e)
  })
  
  // 4.函数
  function renderTasks(tasks) {

    // 任务列表的渲染
    //清空现有ul中html
    ul.innerHTML = '';
    tasks.forEach(task => {
      // 创建一个元素
      const li = document.createElement('li');
      // 修改元素的html内容
      li.innerHTML = `<div class="left">
              <input type="checkbox" data-id="${task.id}" ${task.completed?'checked':''} >
              <span class="${task.completed?'line':''}">${task.text}</span>
            </div>
            <div class="btn-group">
              <button class="editBtn">编辑</button>
              <button class="delBtn" data-id=${task.id}>删除</button>
            </div>
        `;
        // 修改li中checkbox的checked属性
      // const input = li.querySelector("input");
      
      // input.checked = task.completed;
      // console.log(input.checked);

      //找删除按钮
      // const delBtn = li.querySelector(".delBtn");
      // delBtn.addEventListener('click',function(e){
      //   removeTask(task.id,e)
      // })
      // 把元素放到ul中
      ul.appendChild(li)
        
        
        
   
  });
  updateCount();
}
  // 
  // input :
  /*
    功能：分类过滤函数
    输入：tasks-所有任务，filter[all,completed,uncompleted] 
    输出：过滤后的任务
  */
  function filterTasks(tasks,filter) {
    switch (filter) {
      case "completed":
       return tasks.filter(task=>task.completed);
      case "uncompleted":
        return  tasks.filter(task=>!task.completed);
      default:
        return tasks;
    }
  }
  //删除函数
  function removeTask(e){

    let li;
    if(e.target.nodeName =="BUTTON"&& e.target.className=="delBtn"){

      //  console.log(e.target.className);
       const id = e.target.dataset.id;
       tasks=tasks.filter(task =>task.id!=id);
       saveToLocalStoyage()
      
      li = e.target.parentElement.parentElement;

      ul.removeChild(li);
    }
    console.log(tasks);
    updateCount();
    
    // if(tasks.length==0){
    //   ul.innerHTML="<li style='text-align:center'>没有代办事项了哦</li>"
    //   ul.removeEventListener('click',function(){

    //   })
    // }
  }

    //改变task的完成属性值
    function changeStatus(e){
      
      let li;
      if(e.target.nodeName =="INPUT"){
         
         const id = e.target.dataset.id;

         const task=tasks.find(task=>task.id==id)

         task.completed=e.target.checked;
         saveToLocalStoyage()
         
         e.target.parentElement.children[1].classList.toggle('line')
        
         updateCount()
        
      }
    }

    //编辑函数
    function editTask(e){

      let li;
      if(e.target.nodeName =="BUTTON"&& e.target.className=="editBtn"){
  
        //  console.log(e.target.className);
        //  const id = e.target.dataset.id;
        const id = e.target.closest('li').querySelector('input').dataset.id;
        const taskText = e.target.closest('li').querySelector('span').textContent;
        
        showEditAlert(id, taskText);
      }
    }

    //底部统计数据函数
    function updateCount(){
      //底部统计数据渲染
      //生成统计数据
      let all = tasks.length;
        let completed = tasks.filter(task=>task.completed).length;
        let uncompleted = all - completed;
        //修改对应元素的数据
        // const spans = document.querySelectorAll('.footer span');
        // spans[0].textContent = `全部 ${all}`;
        // spans[1].textContent = `已完成 ${completed}`;
        // spans[2].textContent = `未完成 ${uncompleted}`;
        
        //获取元素的另外的方法
        document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`;
        document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`;
        document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`;
      }

    

    //保存到本地存储的函数
    function saveToLocalStoyage(){
      localStorage.setItem('tasks',JSON.stringify(tasks))

    }

    //获取本地保存的函数
    function getLocalStoyage(){
     return JSON.parse(localStorage.getItem('tasks'))

    }



  
  
  
  